<template>
	<view class="main" v-if="JSON.stringify(detail) != '{}'">
		<view class="top-box">
			<view class="top">
				<view class="student-info">
					<view class="avater">
						<image :src="'https://ddzj.hihink.com' + detail.img" mode="aspectFill"></image>
						<view :class="detail.z_status == 1 ? 'dot' : 'active'"></view>
					</view>
					<view class="name">{{detail.z_name ? detail.z_name : '暂无'}}</view>
					<view class="lv">当前评级：{{detail.Level.title}}</view>
				</view>
			</view>
			<view class="b-assistant" v-if="type == 1">

				<text>暂无教练：</text>
				<text @click="handleBAssistant">绑定教练</text>
			</view>
			<view class="b-assistant" v-if="type == 0">
				<text style="color: #bebebe;">学员人数：</text>
				<text style="color: #3377fe;">99+</text>
			</view>
		</view>

		<view class="rate-as" v-if="type == 2">
			<view class="item">
				<view class="left">当前价位：</view>
				<view class="right-moneny">{{detail.Level.price}}/小时</view>
			</view>
			<view class="item">
				<view class="left">当前档位：</view>
				<view class="right-lv">{{detail.Level.title}}</view>
			</view>
			<view class="item">
				<view class="left">形象气质：</view>
				<u-rate disabled :count="8" v-model="detail.Level.score1"></u-rate>
			</view>
			<view class="item">
				<view class="left">助教球技：</view>
				<u-rate disabled :count="8" v-model="detail.Level.score2"></u-rate>
			</view>
			<view class="item">
				<view class="left">亲和力：</view>
				<u-rate disabled :count="8" v-model="detail.Level.score3"></u-rate>
			</view>
		</view>

		<view class="middle">
			<view class="title" v-if="type == 0">学员信息</view>
			<view class="title" v-if="type == 1">教练信息</view>
			<view class="title" v-if="type == 2">助教信息</view>
			<view class="info">
				{{detail.z_introduce}}
			</view>
		</view>

		<view class="bottom">
			<view class="shcool-image">
				<image class="picture" v-for="item in 3" :key="item" src="../../../static/test.png" mode="aspectFill">
				</image>
			</view>
		</view>

		<view class="assistant-buttons" v-if="type == 1">
			<view class="assistant-buttons-content">
				<button @click="show = true">给TA定档</button>
			</view>
		</view>
		<view class="assistant-buttons" v-if="type == 0">
			<view class="assistant-buttons-content">
				<button @click="handleUpdateInfo">修改资料</button>
			</view>
		</view>
		<view class="assistant-buttons" v-if="type == 2">
			<view class="assistant-buttons-content">
				<button @click="popShow = true">立即下单</button>
			</view>
		</view>

		<u-popup v-model="show" mode=center border-radius="10" @close="show = false">
			<view class="content">
				<view class="top-box">
					<view class="title-box">
						<view class="title">定档</view>
						<view class="close" @click="show = false">
							<u-icon name="close-circle" color="#272535" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="rate">
					<view class="name">张三（学员）</view>
					<view class="rate-box">
						<view class="title">形象气质：</view>
						<u-rate :count="count" v-model="value"></u-rate>
					</view>
					<view class="rate-box">
						<view class="title">形象气质：</view>
						<u-rate :count="count" v-model="value"></u-rate>
					</view>
					<view class="rate-box">
						<view class="title">形象气质：</view>
						<u-rate :count="count" v-model="value"></u-rate>
					</view>
				</view>
				<view class="btn">确认定档</view>
			</view>
		</u-popup>

		<!-- 下单 -->
		<Pop @handleConfirm="handleConfirm" @handleClosePop="handleClosePop" ok="确认下单" :show="popShow" title="下单"
			content="确定选择该助教吗" contnetDesc="您确认选择该助教，进行教学吗" />
	</view>


</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import Pop from '@/componnens/pop.vue'
	import { postHttpsRequset } from '@/public-ts-file/request';

	// 给他定档
	let show = ref(false)
	let count = ref(4)
	let value = ref(2)

	let type = ref()
	let apiPath = ref('')
	let itemId = ref()
	onLoad(option => {
		console.log(option, 'opop')
		if (option.id) itemId.value = option.id
		type.value = parseInt(option.type)
		let title = ref('')
		switch (type.value) {
			case 0:
				title.value = '教练详情'
				break
			case 1:
				title.value = '学员详情'
				break
			case 2:
				title.value = '助教详情'
				apiPath.value = '/shop/Zhujiao/info'
				break
		}
		uni.setNavigationBarTitle({
			title: title.value
		})

		// 调用请求详情
		getDetail()
	})

	// 请求详情 
	let detail : any = ref({})
	const getDetail = async () => {
		const parms = {
			path: apiPath.value,
			methods: 'POST',
			data: {
				id: itemId.value
			}
		}
		const res = await postHttpsRequset(parms)
		if (res.code == 200) detail.value = res.data
		console.log(detail.value, 'dddd')
	}

	// 跳转绑定教练
	const handleBAssistant = () => {
		uni.navigateTo({
			url: '/pages/home/school/boundCoach'
		})
	}

	// 修改教练资料
	const handleUpdateInfo = () => {
		uni.navigateTo({
			url: '/pages/home/school/updateCoachInfo'
		})
	}

	// 立即下单
	// 关闭弹窗
	let popShow = ref(false)
	const handleClosePop = (bool : boolean) => popShow.value = bool
	const handleConfirm = async (bool : boolean) => {
		const parms = {
			path: '/shop/Order/add',
			methods: 'post',
			data: {
				z_user_id: detail.value.id
			}
		}
		if (bool) {
			const res = await postHttpsRequset(parms)
			if (res.code == 200) {
				uni.showToast({
					title: '下单成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '下单失败',
					icon: 'none'
				})
			}
			handleClosePop(false)
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		position: absolute;
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		right: 0;
		bottom: 0;
		background-color: red;
	}

	.main {
		padding: 30rpx;

		.rate-as {

			margin-top: 38rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				.left {
					/** 文本1 */
					font-size: 20rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 11.58px;
					color: rgba(153, 153, 153, 1);
				}

				.right-moneny {
					/** 文本1 */
					font-size: 14px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 20.27px;
					color: rgba(255, 87, 51, 1);
				}

				.right-lv {
					/** 文本1 */
					font-size: 23rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 11.58px;
					color: rgba(51, 51, 51, 1);

				}
			}
		}

		.top-box {
			display: flex;
			justify-content: space-between;

			.b-assistant {
				display: flex;
				align-items: flex-end;

				text {
					opacity: 1;
					/** 文本1 */
					font-size: 20rpx;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 23.17px;
					color: rgba(0, 0, 0, 1);
				}
			}

			.top {
				display: flex;
				// justify-content: space-between;

				.student-info {
					display: flex;

					.avater {
						margin-right: 10rpx;
						padding-top: 5rpx;
						position: relative;
						width: 50rpx;
						height: 50rpx;

						.dot {
							position: absolute;
							border-radius: 50%;
							width: 20rpx;
							height: 20rpx;
							right: 0;
							bottom: 0;
							background-color: #6fcc83;
						}

						image {
							border-radius: 50%;
							width: 50rpx;
							height: 50rpx;
						}
					}

					.name {
						padding-top: 10rpx;
						opacity: 1;
						/** 文本1 */
						font-size: 16px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 23.17px;
						color: rgba(0, 0, 0, 1);
					}

					.lv {
						padding-bottom: 8rpx;
						display: flex;
						align-items: flex-end;
						opacity: 1;
						/** 文本1 */
						font-size: 8px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 10.98px;
						color: rgba(170, 170, 170, 1);
					}
				}
			}
		}

		.middle {
			.title {
				opacity: 1;
				/** 文本1 */
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.38px;
				color: rgba(0, 0, 0, 1);
				padding: 32rpx 0 10rpx 0;
			}

			.info {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 14px;
				color: rgba(102, 102, 102, 1);
			}
		}

		.bottom {
			margin-top: 16rpx;

			.shcool-image {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				justify-content: space-between;

				// .picture:nth-child(3n) {
				// 	margin-right: 0;
				// }

				.picture {
					width: 220rpx;
					height: 242rpx;
					border-radius: 5rpx;
				}
			}
		}

		.assistant-buttons {
			margin: 0 30rpx;
			// margin-top: 54rpx;
			position: fixed;
			bottom: 5rpx;
			left: 0;
			right: 0;

			.assistant-buttons-content {
				button {
					background-color: #3377FE;
					color: white;
					border-radius: 100rpx;
					font-size: 28rpx;
					padding: 8rpx 0;

					&::after {
						display: none;
					}
				}
			}
		}


	}

	.content {
		position: relative;
		width: 496rpx;

		.top-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.title-box {
				display: flex;
				justify-content: space-between;
				padding-top: 24rpx;

				.close {
					position: absolute;
					top: 24rpx;
					right: 24rpx;
				}

				.title {
					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
					color: rgba(0, 0, 0, 1);
					text-align: left;
				}
			}
		}

		.btn {
			background-color: #4575f5;
			padding: 14rpx 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 1;
			/** 文本1 */
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 16.46px;
			color: rgba(255, 255, 255, 1);
		}

		.rate {
			padding: 0 28rpx;

			.name {
				padding: 0 130rpx;
				text-align: center;
				padding: 38rpx 0;
				opacity: 1;
				/** 文本1 */
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 19.21px;
				color: rgba(51, 51, 51, 1);
			}

			.rate-box {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.title {
					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 17.38px;
					color: rgba(153, 153, 153, 1);

				}
			}
		}
	}
</style>